<template>
	<div>
		<v-chart class="chart" :option="option" autoresize />
	</div>
</template>

<script>
import { use } from 'echarts/core';
import { BarChart } from 'echarts/charts';
import { CanvasRenderer } from 'echarts/renderers';
import { TooltipComponent, GridComponent } from 'echarts/components';
import VChart from 'vue-echarts';

use([BarChart, CanvasRenderer, TooltipComponent, GridComponent]);

export default {
	components: { VChart },
	data() {
		// 原始数据
		const barData = [
			{ name: 'A', value: 120 },
			{ name: 'B', value: 200 },
			{ name: 'C', value: 150 },
			{ name: 'D', value: 80 },
			{ name: 'E', value: 70 },
		];

		return {
			option: {
				xAxis: {
					type: 'category',
					data: barData.map((item) => item.name),
				},
				yAxis: { type: 'value' },
				series: [
					{
						data: barData.map((item) => item.value),
						type: 'bar',
						markLine: {
							symbol: 'none',
							lineStyle: { color: '#666', type: 'dashed' },
							data: [
								[
									// 起点：柱子左边缘
									{
										coord: ['C', 150], // 类目名称 + 数值
										x: '-25%', // 相对位置向左偏移25%（根据实际柱宽调整）
									},
									// 终点：柱子右边缘
									{
										coord: ['C', 150],
										x: '25%', // 相对位置向右偏移25%
									},
								],
							],
						},
						// markLine: {
						// 	symbol: 'none', // 不显示箭头
						// 	lineStyle: {
						// 		color: '#666',
						// 		type: 'solid',
						// 		width: 2,
						// 	},
						// 	label: { show: false },
						// 	// 为每个柱子生成标记线
						// 	data: barData.map((item) => ({
						// 		name: '参考线',
						// 		yAxis: item.value, // 使用柱子值作为y轴位置
						// 		xAxis: item.name, // 对齐到对应柱子
						// 	})),
						// },
					},
				],
			},
		};
	},
};
</script>

<style>
.chart {
	height: 400px;
}
</style>
